<template>
  <div class="Login">
    <el-carousel height="580px">
      <el-carousel-item v-for="(item,index) in carousel" :key="index">
        <img :src="item.src">
      </el-carousel-item>
    </el-carousel>
    <div class="container">
      <el-form :model="loginForm" ref="loginForm" class="demo-ruleForm">
        <el-form-item
          prop="name"
          :rules="[
    { required: true, message: '用户名不能为空'}
  ]"
        >
          <el-input v-model="loginForm.name" ></el-input>
        </el-form-item>
        <el-form-item class="mt-10"
                      prop="password"
                      :rules="[
    { required: true, message: '密码不能为空'}
  ]"
        >
          <el-input type="password" v-model="loginForm.password" @keyup.enter.native="submitForm('loginForm')"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog title="请选择身份" :visible.sync="dialogShow">
      <el-form :model="elForm">
        <el-form-item label="身份选择" label-width="120px">
          <el-select v-model="type" placeholder="请选择身份">
            <el-option v-for="item in elForm.form" :key="item.value" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-checkbox v-model="checked">记住身份（以便下次登录直接进入）</el-checkbox>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="!dialogShow">取 消</el-button>
        <el-button type="primary" @click="sure(type)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      carousel: [
        {
          src: 'http://www.u-jy.net/assets/images/auth/banner1-1bj.png'
        },
        {
          src: 'http://www.u-jy.net/assets/images/auth/banner1-2bj.png'
        }
      ],
      loginForm: { // 登录表单
        name: '', // 用户名
        password: '' // 密码
      },
      elForm: {
        form: [ // 身份选择
          {
            name: '', // 用户名
            value: '' // 密码
          }
        ]
      },
      type: '', // 选择的用户类型
      dialogShow: false, // 框框显示
      checked: true // 记住用户类型
    }
  },
  methods: {
    /**
     * 表单提交的方法
     * @param formName -> 表单名称
     */
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '登录中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          let data = {
            userName: this.loginForm.name,
            userPassword: this.loginForm.password
          };
          this.$api.login(data).then(res => {
            loading.close();
            this.$message.success('登录成功');
            this.$storage.set('userId', res.userId);
            this.$storage.set('tokens', res.tokens);
            this.$storage.set('roles', res.roles);
            this.$storage.set('orgId', res.orgId);
            this.elForm.form = res.userType;
            if (this.$storage.get('lastLoginType')) {
              this.sure(this.$storage.get('lastLoginType'));
              return;
            }
            if (this.elForm.form.length === 1) {
              this.sure(this.elForm.form[0].value);
              return;
            }
            if (this.elForm.form) {
              this.dialogShow = true
            }
          })
        }
      });
    },
    /**
     * 身份选择的确认方法
     * @param {number} data - 用户类型
     */
    sure (data) {
      if (!this.$storage.get('lastLoginType')) {
        if (this.checked) {
          this.$storage.set('lastLoginType', this.type)
        }
      }
      switch (data) {
        case 1:
          this.dialogShow = false;
          window.location.href = 'teacher.html';
          break;
        case 2:
          this.dialogShow = false;
          window.location.href = 'family.html';
          break;
        case 4:
          this.dialogShow = false;
          window.location.href = 'region.html';
          break;
        default:
          this.$message.warning('请选择身份')
      }
    }
  },
  created () {

  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">
  .demo-ruleForm {
    width: 280px;
    height: 296px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    position: absolute;
    right: 0;
    top: 128px;
    z-index: 20;
  }
</style>
